<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
   <body>
    <div class="nav">
        <img src="../img/logo.jpg" alt="">
        <span>我的博客系统</span>
        <span class="space"></span>
        <input type="text" id="searchInput" placeholder="搜索博客标题">
        <button id="searchButton">搜索</button>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="https://www.baidu.com/">注销</a>
    </div>
    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="../img/touxiang.webp" alt="">
                <h3>Dklau</h3>
                <a href="https://gitee.com/">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <div class="blog" id="blogList">
                <!-- 博客列表动态生成 -->
            </div>
            <div id="pagination"></div>
        </div>
    </div>
    <script>
        const blogList = document.getElementById('blogList');
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');
        const pagination = document.getElementById('pagination');

        // 原始博客数据，用于重置搜索
        const originalBlogs = [
            {
                title: '这是第一篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 1
            },
            {
                title: '这是第二篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 2
            },
            {
                title: '这是第三篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 3
            },
            {
                title: '这是第四篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 4
            },
            {
                title: '这是第五篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 5
            },
                      {
                title: '这是第六篇博客',
                date: '2025-05-20',
                desc: '这是博客信息Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo error, modi exercitationem cupiditate, dolorem repudiandae fugiat sint nesciunt eveniet iste perferendis quis eligendi. Quis similique, reiciendis illo dolore quibusdam sint?',
                id: 5
            }
            // 可以添加更多博客数据
        ];

        // 当前显示的博客数据
        let blogs = [...originalBlogs];

        const itemsPerPage = 5;
        let currentPage = 1;

        function displayBlogs(page) {
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentBlogs = blogs.slice(startIndex, endIndex);

            blogList.innerHTML = '';
            
            if (currentBlogs.length === 0) {
                blogList.innerHTML = '<div class="no-result">没有找到匹配的博客</div>';
                return;
            }

            currentBlogs.forEach(blog => {
                const blogElement = document.createElement('div');
                blogElement.classList.add('blog');
                blogElement.innerHTML = `
                    <div class="title">
                        ${blog.title}
                    </div>
                    <div class="date">
                        ${blog.date}
                    </div>
                    <div class="desc">
                        ${blog.desc}
                    </div>
                    <a class="detail" href="blog_content.html?blogId=${blog.id}">查看全文&gt;&gt;</a>
                `;
                blogList.appendChild(blogElement);
            });
        }

        function displayPagination() {
            const totalPages = Math.ceil(blogs.length / itemsPerPage);
            pagination.innerHTML = '';

            // 添加"上一页"按钮
            const prevButton = document.createElement('button');
            prevButton.textContent = '上一页';
            prevButton.disabled = currentPage === 1;
            prevButton.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    displayBlogs(currentPage);
                    displayPagination();
                }
            });
            pagination.appendChild(prevButton);

            // 页码按钮
            for (let i = 1; i <= totalPages; i++) {
                const pageButton = document.createElement('button');
                pageButton.textContent = i;
                if (i === currentPage) {
                    pageButton.disabled = true;
                    pageButton.style.backgroundColor = '#3498db';
                    pageButton.style.color = 'white';
                }
                pageButton.addEventListener('click', () => {
                    currentPage = i;
                    displayBlogs(currentPage);
                    displayPagination();
                });
                pagination.appendChild(pageButton);
            }

            // 添加"下一页"按钮
            const nextButton = document.createElement('button');
            nextButton.textContent = '下一页';
            nextButton.disabled = currentPage === totalPages;
            nextButton.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    displayBlogs(currentPage);
                    displayPagination();
                }
            });
            pagination.appendChild(nextButton);
        }

        // 搜索功能
        function performSearch() {
            const searchTerm = searchInput.value.trim().toLowerCase();
            
            // 空搜索时重置为原始数据
            if (!searchTerm) {
                blogs = [...originalBlogs];
            } else {
                blogs = originalBlogs.filter(blog => 
                    blog.title.toLowerCase().includes(searchTerm)
                );
            }
            
            currentPage = 1;
            displayBlogs(currentPage);
            displayPagination();
            
            // 为搜索按钮添加点击效果
            searchButton.classList.add('clicked');
            setTimeout(() => {
                searchButton.classList.remove('clicked');
            }, 300);
        }

        // 绑定搜索按钮点击事件
        searchButton.addEventListener('click', performSearch);

        // 绑定搜索框回车事件
        searchInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                performSearch();
            }
        });

        // 初始化页面
        displayBlogs(currentPage);
        displayPagination();
    </script>
</body>
</html>